<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link th:href="@{layui/css/layui.css}" rel="stylesheet" media="all">
</head>
<body>
<style>
    .demo-login-container {
        width: 320px;
        margin: 21px auto 0;
    }

    /*.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}*/
</style>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-md-offset3" style="margin-top: 50px;">

            <!-- Tab容器 -->
            <div class="layui-tab layui-tab-brief" lay-filter="loginTab">
                <ul class="layui-tab-title" style="text-align: center">
                    <li class="layui-this">用户名登录</li>
                    <li>手机登录</li>
                    <li>邮箱登录</li>
                </ul>
                <!-- 用户名登录内容 -->
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form">
                            <div class="demo-login-container">
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username" value="" lay-verify="required"
                                               onblur="checkname()" placeholder="用户名" lay-reqtext="请填写用户名"
                                               autocomplete="off" class="layui-input" lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-password"></i>
                                        </div>
                                        <input type="password" name="password" value="" lay-verify="required"
                                               onblur="checkpass()" placeholder="密   码" lay-reqtext="请填写密码"
                                               autocomplete="off" class="layui-input" lay-affix="eye">
                                    </div>
                                </div>
                                <div  class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs7">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-vercode"></i>
                                                </div>
                                                <input type="text" name="captcha" value="" lay-verify="required"
                                                       placeholder="验证码" required minlength="4" maxlength="4"
                                                       lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"
                                                       lay-affix="clear">
                                            </div>
                                        </div>
                                        <div class="layui-col-xs5">
                                            <div style="margin-left: 10px;">
                                                <img th:src="@{captcha}" id="captchaImg" alt="验证码" title="点击刷新验证码">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                                    <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录
                                    </button>
                                </div>
                                <div class="layui-form-item demo-login-other">
                                    <label>社交账号登录</label>
                                    <span style="padding: 0 21px 0 6px;">
                      <a href="javascript:;"><i class="layui-icon layui-icon-email" style="color: #3492ed;"></i></a>
                      <a href="javascript:;"><i class="layui-icon layui-icon-cellphone-fine" style="color: #4daf29;"></i></a>
                    </span>
                                    或 <a th:href="@{register}">注册帐号</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- 手机登录内容 -->
                    <div class="layui-tab-item ">
                        <form class="layui-form">
                            <div class="demo-login-container">
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs7">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-cellphone"></i>
                                                </div>
                                                <input type="text" name="cellphone" value="" lay-verify="required|phone"
                                                       placeholder="手机号" lay-reqtext="请填写手机号"
                                                       autocomplete="off" class="layui-input" id="reg-cellphone">
                                            </div>
                                        </div>
                                        <div class="layui-col-xs5">
                                            <div style="margin-left: 11px;">
                                                <button type="button"
                                                        class="layui-btn layui-btn-fluid layui-btn-primary"
                                                        lay-on="reg-get-vercode">获取验证码
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-vercode"></i>
                                        </div>
                                        <input type="text" name="vercode" value="" lay-verify="required"
                                               placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary"
                                           title="同意">
                                    <a th:href="@{agreement}" target="_blank"
                                       style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册
                                    </button>
                                </div>
                                <div class="layui-form-item demo-reg-other">
                                    <label>社交账号注册</label>
                                    <span style="padding: 0 21px 0 6px;">
                        <a href="javascript:;"><i class="layui-icon layui-icon-email" style="color: #3492ed;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-cellphone-fine"
                                                  style="color: #4daf29;"></i></a>
                    </span>
                                    <a href="#login">登录已有帐号</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- 邮箱登录内容 -->
                    <div class="layui-tab-item">
                        <form class="layui-form">
                            <div class="demo-login-container">
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs7">
                                            <div class="layui-input-wrap">
                                                <div class="layui-input-prefix">
                                                    <i class="layui-icon layui-icon-email"></i>
                                                </div>
                                                <input type="text" name="email" value="" lay-verify="required|email"
                                                       placeholder="邮箱" lay-reqtext="请填写邮箱" autocomplete="off"
                                                       class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-col-xs5">
                                            <div style="margin-left: 11px;">
                                                <button type="button"
                                                        class="layui-btn layui-btn-fluid layui-btn-primary"
                                                        lay-on="reg-get-vercode">获取验证码
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-vercode"></i>
                                        </div>
                                        <input type="text" name="vercode" value="" lay-verify="required"
                                               placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary"
                                           title="同意">
                                    <a th:href="@{agreement}" target="_blank"
                                       style="position: relative; top: 6px; left: -15px;">
                                        <ins>用户协议</ins>
                                    </a>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册
                                    </button>
                                </div>
                                <div class="layui-form-item demo-reg-other">
                                    <label>社交账号注册</label>
                                    <span style="padding: 0 21px 0 6px;">
                        <a href="javascript:;"><i class="layui-icon layui-icon-email" style="color: #3492ed;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-cellphone-fine"
                                                  style="color: #4daf29;"></i></a>
                    </span>
                                    <a href="#login">登录已有帐号</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script th:src="@{layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // thymeleaf 获取当前项目路径
    /*<![CDATA[*/
    const ctx = /*[[@{/}]]*/;
    /*]]>*/
    // 当前窗口 不是最外层窗口
    if (window != window.top) {
        // 父窗口 window.parent，最外层窗口 window.top
        window.top.location.href = ctx;
    }
</script>
<script>

    let captchaImg = document.getElementById("captchaImg");
    captchaImg.onclick = function(){
        // this = captchaImg;
        captchaImg.src = ctx + "captcha?" + new Date().getTime();
    }
    // 使用Layui的Tab组件
    layui.use('element', function () {
        var element = layui.element;

        // 初始界面为索引为1的界面
        element.tabChange('loginTab', 0);
        // element.tabChange('loginTab', 0);
        // 在这里定义Tab选项卡的切换事件
        element.on('tab(loginTab)', function (data) {
            console.log(data.index); // 当前Tab的索引
            // 根据索引切换对应的登录内容
        });
    });
</script>


<script>
    function checkname() {
        let username = document.getElementsByName("username")[0].value;
        if (username == "") {
            layer.msg("用户名不能为空");
            return false;
        }
        if (username.length < 4 || username.length > 16) {
            layer.msg("用户名长度必须在4-16之间");
            return false;
        }
        if (!/^[a-zA-Z0-9_-]+$/.test(username)) {
            layer.msg("用户名只能由数字、字母、下划线、中划线组成");
            return false;
        }
    }

    function checkpass() {
        let password = document.getElementsByName("password")[0].value;
        if (password == "") {
            layer.msg("密码不能为空");
            return false;
        }
        if (password.length < 6 || password.length > 16) {
            layer.msg("密码长度必须在6-16之间");
            return false;
        }
    }


    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;
        // let captchaImg = document.getElementById("captchaImg");
        // captchaImg.onclick = function () {
        //     // this = captchaImg;
        //     captchaImg.src = ctx + "captcha?" + new Date().getTime();
        // }


        // 提交事件
        form.on('submit(demo-login)', function (data) {
            var field = data.field; // 获取表单字段值

            var formData = new URLSearchParams();
            formData.append('username', field.username);
            formData.append('password', field.password);
            formData.append('captcha', field.captcha);

            fetch('/logins', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                // 将表单数据作为请求体发送
                body: formData
            })
                .then((response) => response.json())
                .then((data) => {
                        // console.log(response.json())
                        console.log(data)
                        if (data.code == "408") {
                            layer.open({
                                shade: 0.6,
                                title: '',
                                content: '验证码错误',
                                btn: ['确定'],

                            })
                        }
                        else if (data.code == "401"){
                            layer.open({
                                shade: 0.6,
                                title: '登录失败',
                                content: '用户名或密码错误',
                                btn: ['确定'],

                            })}
                        else if (data.code == "200") {
                            layer.open({
                                shade: 0.6,
                                title: '登录成功',
                                content: '登录成功',
                                btn: ['确定'],
                            })
                        }
                        else {
                            layer.open({
                                shade: 0.6,
                                title: '登录失败',
                                content: '登录失败',
                                btn: ['确定'],

                            })
                        }
                    }
                );

            // layer.alert(JSON.stringify(data), {
            //   title: '当前填写的字段值'
            // });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });
    });
</script>

</body>
</html>